import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}
const Pagination = ({
  currentPage,
  totalPages,
  onPageChange
}: PaginationProps) => {
  const generatePageNumbers = () => {
    const pages = [];
    const maxVisiblePages = 5;
    if (totalPages <= maxVisiblePages) {
      // Show all pages if total is less than or equal to max visible
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      // Always show first page
      pages.push(1);
      // Calculate start and end of visible pages
      let start = Math.max(2, currentPage - 1);
      let end = Math.min(totalPages - 1, start + 2);
      // Adjust start if end is too close to totalPages
      if (end === totalPages - 1) {
        start = Math.max(2, end - 2);
      }
      // Add ellipsis if needed after first page
      if (start > 2) {
        pages.push('...');
      }
      // Add visible pages
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      // Add ellipsis if needed before last page
      if (end < totalPages - 1) {
        pages.push('...');
      }
      // Always show last page
      if (totalPages > 1) {
        pages.push(totalPages);
      }
    }
    return pages;
  };
  return <div className="flex items-center justify-center space-x-2 my-8">
      <button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1} className={`p-2 rounded-full ${currentPage === 1 ? 'text-[#8a8f98] cursor-not-allowed' : 'text-white hover:bg-[#151518]'}`}>
        <ChevronLeftIcon size={20} />
      </button>
      {generatePageNumbers().map((page, index) => <button key={index} onClick={() => typeof page === 'number' ? onPageChange(page) : null} className={`w-10 h-10 rounded-full flex items-center justify-center text-sm ${page === currentPage ? 'bg-[#4361ee] text-white' : page === '...' ? 'text-[#8a8f98] cursor-default' : 'text-[#8a8f98] hover:text-white hover:bg-[#151518]'}`}>
          {page}
        </button>)}
      <button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className={`p-2 rounded-full ${currentPage === totalPages ? 'text-[#8a8f98] cursor-not-allowed' : 'text-white hover:bg-[#151518]'}`}>
        <ChevronRightIcon size={20} />
      </button>
    </div>;
};
export default Pagination;